<script src="/web/js/sso/sso-login.js"></script>
<div id="fragment-comment" class="comment" data-commenttargetid="370597297618157600" data-commenttitle="文章标题原文">
    <div class="title">网友评论</div>
    <div class="textarea-wrap">
        <img class="header" src="" alt="个人头像">
        <textarea name="textarea-comment" id="textarea-comment" placeholder="说点什么吧"></textarea>
        <div class="commit-wrap">
            <button>发表</button>
        </div>
    </div>
    <div class="no-login">
        <a href="/web/html/home/login.html?goBack=1" title="#">登录</a>后参与讨论
    </div>
    <ul class="comment-list">
        <li class="no-comment">暂无评论，欢迎您发表观点！</li>
    </ul>
</div>
<script>
    $(function () {
        $('.textarea-wrap img.header').prop('src',userInfo.userpic||'');
        if(!token){
            $('.textarea-wrap').css({display: 'none'});
            $('#fragment-comment .no-login').css({display: 'block'});
        }

        var commentTargetId = $('#fragment-comment').data('commenttargetid');
        var commentTitle = $('#fragment-comment').data('commenttitle');
        function addCommentContent(commentList){
            var $ocommentList = $('ul.comment-list');
            var html = '';
            if(commentList.length){
                $.each(commentList, function (index, item) {
                    var nextHtml = '';
                    $.each(item.subCommentList,function (index1,item1) {
                        nextHtml += '<li>' +
                            '                        <div class="user-info">\n' +
                            '                            <img src='+ item1.userInfo.userpic +' alt="回复头像">\n' +
                            '                            <span class="nickname">'+ item1.nickname +'</span>\n' +
                            '                            <span class="signature">回复</span>\n' +
                            '                            <span class="nickname">'+ item1.replyUserInfo.nickname +'</span>\n' +
                            '                        </div>\n' +
                            '                        <div class="comment-content">\n' + item1.comments +
                            '                        </div>\n' +
                            '                        <div class="option">\n' +
                            '                            <span class="date">'+ item1.updateTime +'</span>\n' +
                            '                            <span class="reply reply-2">\n' +
                            '                                <icon class="icon-comment"></icon>\n' +
                            '                                回复\n' +
                            '                            </span>\n' +
                            '                        </div>\n' +
                            '                        <div class="textarea-reply-wrap textarea-reply-wrap-2">\n' +
                            '                            <textarea placeholder='+ '回复：'+item1.nickname +'></textarea>\n' +
                            '                            <div class="commit-wrap">\n' +
                            '                                <button data-level="2" data-commentid='+ item1.commentId+
                            '                                        data-rootcommentid='+ item1.rootCommentId +'>回复</button>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '                    </li>'
                    });

                    var firstHtml = '<li>\n' +
                        '            <img src='+ item.userInfo.userpic +' alt="评论头像">\n' +
                        '            <div class="right">\n' +
                        '                <div class="user-info">\n' +
                        '                    <span class="nickname">' + item.nickname + '</span>\n' +
                        '                    <span class="signature">'+ item.userInfo.userSignature +'</span>\n' +
                        '                </div>\n' +
                        '                <div class="comment-content">\n' + item.comments +
                        '                </div>\n' +
                        '                <div class="option">\n' +
                        '                    <span class="date">' + item.updateTime + '</span>\n' +
                        '                    <span class="reply reply-1">\n' +
                        '                        <icon class="icon-comment"></icon>\n' +
                        '                        回复\n' +
                        '                    </span>\n' +
                        '                </div>\n' +
                        '                <div class="textarea-reply-wrap textarea-reply-wrap-1">\n' +
                        '                    <textarea placeholder=' + '回复：' + item.nickname + '></textarea>\n' +
                        '                    <div class="commit-wrap">\n' +
                        '                        <button data-level="1" data-commentid='+ item.commentId +'>回复</button>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '                <ul class="reply-list">'+ nextHtml +'</ul>'
                    '            </div>\n' +
                    '        </li>';
                    html += firstHtml;
                });
                $ocommentList.html(html);
                utils.computedArticleHeight();
            }

            var $oCommentBtn = $('#textarea-comment+.commit-wrap button');
            var $aReplyBtn = $('.textarea-reply-wrap .commit-wrap button');
            var $aReply = $('.reply');

            $aReply.each(function (i) {
                $aReply.eq(i).click(function () {
                    $('.textarea-reply-wrap').css('display', 'none');
                    $('.textarea-reply-wrap').eq(i).css({'display': 'block'});
                })
            })
            $oCommentBtn.click(function () {
                // alert('评论内容' + $('#textarea-comment').val());
                var commentContent = $('#textarea-comment').val();
                if(commentContent){
                    $.ajax({
                        url:ports.addComment,
                        data: {
                            commentTargetId: commentTargetId,
                            comments: commentContent,
                            commentType: 1,
                            commentTitle: commentTitle
                        },
                        success:function (res) {
                            console.log('提交评论',res);
                            if(res.status == 200){
                                $('#textarea-comment').val('');
                                addCommentContent(res.data);

                                $.ajax({
                                    url:ports.articleLikeNums,
                                    data:{
                                        articleId:commentTargetId
                                    },
                                    success:function (res1) {
                                        console.log('查询文章收藏点赞数量',res1);
                                        var $btnCommentLi = $('#fragment-article-share-menu .menu-list>li:nth-of-type(4)');
                                        $btnCommentLi.find('span').text(res1.data.commentCount);
                                    }
                                })
                            }
                        }
                    })
                }
            })

            $aReplyBtn.click(function () {
                // console.log($(this).index())
                // alert('回复内容' + $(this).parent().prev().val());
                var that = this;
                var replyLevel = $(this).data('level');
                var replyContent = $(this).parent().prev().val();
                // console.log(replyLevel)
                if(replyContent){
                    $.ajax({
                        url:ports.addComment,
                        data: {
                            commentTargetId: commentTargetId,
                            comments: replyContent,
                            commentType: 2,
                            commentTitle: commentTitle,
                            rootCommentId:replyLevel==1?$(this).data('commentid'):$(this).data('rootcommentid'),
                            replyCommentId:$(this).data('commentid')
                        },
                        success:function (res) {
                            console.log('提交回复',res);
                            if(res.status == 200){
                                $(that).parent().prev().val('');
                                addCommentContent(res.data);

                                $.ajax({
                                    url:ports.articleLikeNums,
                                    data:{
                                        articleId:commentTargetId
                                    },
                                    success:function (res1) {
                                        console.log('查询文章收藏点赞数量',res1);
                                        var $btnCommentLi = $('#fragment-article-share-menu .menu-list>li:nth-of-type(4)');
                                        $btnCommentLi.find('span').text(res1.data.commentCount);
                                    }
                                })
                            }
                        }
                    })
                }
            })
        }
        $.ajax({
            url: ports.listComment,
            data: {
                commentTargetId: commentTargetId,
            },
            success:function (res) {
                var resData = res.data;
                addCommentContent(resData);
            }
        });
    })
</script>